import React, { Component } from 'react';
import { withRouter, Route } from 'react-router-dom';
import { Avatar, Icon, Tools, List } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';

import New from '../new/New';

const { getLabel } = Tools;
const newRoute = '/contacts/personCard/new';
const noop = () => {};

@withRouter
export default class PersonCard extends Component {
  prefixCls = 'email-person-card';

  static defaultProps = {
    extraActions: [],
  }

  renderActionButtons = () => {
    const { extraActions, history } = this.props;
    const actions = [
      {
        icon: 'mail-write-letter',
        label: getLabel('30912', '写信'),
        action: () => history.push(newRoute)
			},
			/*
      {
        icon: 'mail-exchange-of-mail',
        label: getLabel('384326', '往来邮件'),
        action: noop,
			},
			*/
      ...extraActions,
    ];
    return (
      <List className={`${this.prefixCls}-action-list`}>
        {actions.map(i => (
          <List.Item key={i.label} arrow="horizontal" onClick={i.action || noop}>
            <div className={`${this.prefixCls}-action-list-item`}>
              <div className={`${this.prefixCls}-action-list-item-icon`}><Icon type={i.icon} /></div>
              <div className={`${this.prefixCls}-action-list-item-label`}>{i.label}</div>
            </div>
          </List.Item>
        ))}
      </List>
    );
  }

  render() {
    const { person } = this.props;
    const { mailUserName, mailaddress } = person;
    return (
      <RouteLayout>
        <div key="personCard" className={`${this.prefixCls} wm-route-layout`}>
          <div className={`${this.prefixCls}-info`}>
            <div className={`${this.prefixCls}-info-photo`}><Avatar name={mailUserName ? mailUserName.toUpperCase()[0] : ''}  url=""/></div>
            <div className={`${this.prefixCls}-info-name`}>{mailUserName}</div>
            <div className={`${this.prefixCls}-info-address`}>{mailaddress}</div>
          </div>
          {this.renderActionButtons()}
          <Route
            key="new"
            path={newRoute}
            render={() => (<New path={newRoute} params={{ to: mailaddress, isInternal: 0 }}/>)}
          />
        </div>
      </RouteLayout>
    );
  }
}
